<template>
  <div class="icon_item round_rect">
    <i :tips="item?.name || name"
       :class="[(item?.meta?.icon || icon), {pointer}, 'ri-xl']"
       @click="() => (item?.path || path)? this.$router.push(item?.path || path): null"/>
  </div>
</template>

<script>
export default {
  name: "IconItem",
  props: {
    item: Object,
    name: String,
    icon: String,
    path: String,
    pointer: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped lang="less">
// 通过修改样式变量，来形成不同的样式组合
.icon_item.round_rect {
  --bg-show-radius: 20%;
  --tips-show-top: 60%;
}

.global_dark .icon_item {
  --bg-hide-color: rgba(0, 0, 0, 0);
  --bg-show-color: rgba(0, 0, 0, 0.4);
}

.icon_item > i.pointer {
  cursor: pointer;
}

.icon_item {
  /*
    所有的状态预设变量,通过改变这些变量的预设值来设置不同的样式组合
  */

  --tips-content: attr(tips);
  --tips-hide-top: 50%;
  --tips-show-top: 80%;
  --tips-hide-opacity: 0;
  --tips-show-opacity: 1;
  --tips-font-size: 8px;
  --tips-font-scale: scale(0.9);
  --bg-hide-color: rgba(255, 255, 255, 0);
  --bg-show-color: rgba(255, 255, 255, 0.4);
  --bg-hide-radius: 50%;
  --bg-show-radius: 50%;
  --icon-hide-top: 0;
  --icon-show-top: -5px;

  --bg-transition: all .3s ease;
  --tips-transition: all .3s ease;
  --icon-transition: all .3s ease;

  /*
    绑定hover时的发生的所有变化
  */

  &:hover, &:focus {
    & > i {
      background-color: var(--bg-show-color);
      border-radius: var(--bg-show-radius);

      &::after {
        top: var(--tips-show-top);
        opacity: var(--tips-show-opacity);
      }

      &::before {
        top: var(--icon-show-top);
      }
    }
  }

  /*
    包含变量的预设样式
   */
  width: 100%;
  position: relative;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-drag: none;

  & > i {
    width: 80%;
    height: 80%;
    position: absolute;
    border-radius: var(--bg-hide-radius);
    background-color: var(--bg-hide-color);
    transition: var(--bg-transition);

    &::before {
      position: absolute;
      width: 100%;
      height: 100%;
      top: var(--icon-hide-top);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: var(--icon-transition);
    }

    &::after {
      content: var(--tips-content);

      left: 0;
      top: var(--tips-hide-top);
      width: 100%;
      position: absolute;
      display: inline-block;
      opacity: var(--tips-hide-opacity);

      text-align: center;
      transform: var(--tips-font-scale);
      font-size: var(--tips-font-size);
      transition: var(--tips-transition);
    }
  }

  &::after {
    content: '';
    display: block;
    padding-top: 100%;
  }
}

</style>